<template>
  <a-drawer
    title="建议"
    :width="720"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-row>
        <a-col
          class="ant-form-item-required"
          :span="5"
          style="color:rgba(0, 0, 0, 0.85);text-align:right;line-height: 40px;"
          >饮食得分：</a-col
        >
      </a-row>
      <a-row>
        <a-col :span="5" style="font-size:14px;color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 40px;"
          >饮食合理：</a-col
        >
        <a-col :span="16">
          <a-rate v-model="rate1"></a-rate>
          <span class="ant-rate-text" :style="rateColor1">{{ rateScore(rate1) }}</span>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="5" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 40px;">评分说明：</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">很好（5分）：</a-col>
        <a-col :span="16">饮食颜色、结构、摄入量完美</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">较好（4分）：</a-col>
        <a-col :span="16">饮食结构、摄入量OK，颜色搭配略不足</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">一般（3分）：</a-col>
        <a-col :span="16">饮食结构、摄入量有一项不足；或有一项超标</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">较低（2分）：</a-col>
        <a-col :span="16">饮食结构、摄入量有一项不足；或有两项超标</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">差（1分）：</a-col>
        <a-col :span="16">饮食结构、摄入量有两项不足；或有两项超标</a-col>
      </a-row>

      <a-row>
        <a-col :span="5" style="font-size:14px;color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 40px;"
          >烹饪方法：</a-col
        >
        <a-col :span="16">
          <a-rate v-model="rate2"></a-rate>
          <span class="ant-rate-text" :style="rateColor2">{{ rateScore(rate2) }}</span>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="5" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 40px;">评分说明：</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">很好（5分）：</a-col>
        <a-col :span="16">蒸、焯、凉拌、炒为主，完全无油炸，适量的油、盐、醋、芝麻油、葱、姜、蒜</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">较好（4分）：</a-col>
        <a-col :span="16">蒸、焯、凉拌、炒为主，完全无油炸，偶尔偏油腻、偏咸、添加了鸡精、味精等不太健康的调料</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">一般（3分）：</a-col>
        <a-col :span="16">清炒为主，完全无油炸，有时偏油腻、口味偏浓</a-col>
      </a-row>
      <a-row>
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">较低（2分）：</a-col>
        <a-col :span="16">清炒为主，偏油腻，有油炸、口味太浓</a-col>
      </a-row>
      <a-row style="margin-bottom:10px">
        <a-col :span="6" style="color:rgba(0, 0, 0, 0.65);text-align:right;line-height: 20px;">差（1分）：</a-col>
        <a-col :span="16">饮食油腻，有油炸、烧烤、口感特浓</a-col>
      </a-row>

      <a-form-item label="建议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select v-model="signinTypeText" disabled>
          <a-select-option :value="5">饮食</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="建议内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-textarea
          v-decorator="['suggestContent', { rules: [{ required: true, message: '请输入建议内容！' }] }]"
          :rows="4"
          placeholder="请输入100字以内的建议内容"
        />
      </a-form-item>
      <div>
        <a
          :style="{ display: 'inline-block', float: 'right', marginRight: '84px', color: 'red' }"
          @click="handleTemplateSave"
        >
          保存到模版
        </a>
        <a
          :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
          @click="handleTemplate"
        >
          从模版选择
        </a>
      </div>
      <a-modal
        :visible="saveVisit"
        title="保存到模版"
        ref="saveVisit"
        width="500px"
        @ok="handleOk"
        @cancel="handleCancel"
        :confirm-loading="typeConfirmLoading"
      >
        <a-form-model ref="editform" :model="category" :rules="validatorRules">
          <a-form-model-item label="分类名称" :labelCol="{ span: 4 }" :wrapperCol="{ span: 8 }" prop="categoryType">
            <a-select placeholder="请选择分类" v-model="category.categoryType">
              <a-select-option v-for="item in list" :key="item.dataId" :value="item.dataId">{{
                item.categoryName
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="onClose"> 取消 </a-button>
      <a-button type="primary" @click="postAdvise"> 确认 </a-button>
    </div>
    <advise-template ref="modalForm" @ok="modalFormOk"></advise-template>
  </a-drawer>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import AdviseTemplate from './AdviseTemplate'
import { postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'FoodModal',
  components: { AdviseTemplate },
  data() {
    return {
      drawerWidth: 700,
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD HH:mm:ss',
      title: '操作',
      visible: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      model: {},
      suggestContent: '',
      rate1: 0,
      rate2: 0,
      recordDate: '',
      signinTypeText: 5,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      patientId: '',
      uploadLoading: false,
      confirmLoading: false,
      saveVisit: false,
      category: {},
      typeConfirmLoading: false,
      recordId: '',
      url: {
        getAdviseList: '107/01/1070108',
        getTargetValue: '107/02/1070202',
        postAdvise: '/signin/suggest/save'
      }
    }
  },
  computed: {
    rateColor1() {
      if (this.rate1 == 1 || this.rate1 == 2) {
        return 'color:#D9321F'
      } else if (this.rate1 == 3 || this.rate1 == 4) {
        return 'color:#D9A71F'
      } else if (this.rate1 == 5 || this.rate1 == 6) {
        return 'color:#1FD944'
      } else {
        return ''
      }
    },
    rateColor2() {
      if (this.rate2 == 1 || this.rate2 == 2) {
        return 'color:#D9321F'
      } else if (this.rate2 == 3 || this.rate2 == 4) {
        return 'color:#D9A71F'
      } else if (this.rate2 == 5 || this.rate2 == 6) {
        return 'color:#1FD944'
      } else {
        return ''
      }
    }
  },
  created() {
    this.patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
    this.form.setFieldsValue({
      signinTypeText: 5
    })
  },
  methods: {
    ...mapGetters(['doctorId', 'orgCode']),
    add(record) {
      this.recordId = record.recordId
      this.recordDate = record.date
      this.visible = true
      this.getType()
      this.resetScreenSize()
    },
    getType() {
      postAction('/suggest/category/list', { orgCode: this.orgCode() }).then(res => {
        if (res.success) {
          this.list = res.result
        } else {
          console.log(res.message)
        }
      })
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    handleOk() {
      this.$refs.editform.validate(valid => {
        if (valid) {
          const params = {
            patientId: this.queryParam.patientId,
            signinType: this.category.categoryType,
            suggestContent: this.category.suggestContent,
            orgCode: this.orgCode()
          }
          postAction('/201/02/2010219', params).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.handleCancel()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    handleCancel() {
      this.saveVisit = false
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    rateScore(rate) {
      switch (rate) {
        case 1:
          return '差'
          break
        case 2:
          return '较低'
          break
        case 3:
          return '一般'
          break
        case 4:
          return '较好'
          break
        case 5:
          return '很好'
          break
      }
    },
    postAdvise() {
      if (!this.rate1 || !this.rate2) {
        this.$message.warning('请评分！')
        return
      }
      this.form.validateFields((err, values) => {
        if (!err) {
          let params = {
            dataId: null,
            patientId: this.patientId,
            suggest: values.suggestContent,
            recordDate: this.recordDate,
            suggestDoctorId: this.doctorId(),
            score: this.rate1 + ',' + this.rate2,
            orgCode: this.orgCode(),
            recordId: this.recordId,
            signinType: 5
          }
          console.log(params)
          postAction(this.url.postAdvise, params).then(res => {
            if (res.success) {
              this.$message.success('建议保存成功！')

              this.onClose()
              this.$emit('ok')
            }
          })
        }
      })
    },
    modalFormOk(content) {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          suggestContent: content
        })
      })
    },
    handleTemplateSave() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.category.suggestContent = values.suggestContent
        }
      })
      this.saveVisit = true
    },
    handleTemplate() {
      this.$refs.modalForm.add()
    },

    onClose() {
      this.visible = false
      this.rate1 = 0
      this.rate2 = 0
      this.form.setFieldsValue({
        suggestContent: ''
      })
    }
  }
}
</script>

<style scoped></style>

